<template>
  <div>
    <div ref="lineChart" style="width: 100vw; height:90vh;"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const lineChart = ref(null);  // 引用图表容器
let chart = null;  // 图表实例
let reversedData = [];  // 存储历史数据
let latestData = [];  // 存储最新数据

// 创建 WebSocket 连接
const socket = new WebSocket("ws://localhost:8111");

socket.onmessage = (event) => {
  // 解析后端返回的数据
  const data = JSON.parse(event.data);
  console.log(data.historicalData);
  
  // 更新数据
  reversedData = data.historicalData;
  latestData = data.latestData;

  console.log('Historical Data:', reversedData);  // 输出历史数据
  console.log('Latest Data:', latestData);        // 输出最新数据

  // 更新图表数据
  updateChart();
};

// 提取并格式化 created_at 为可读日期
const getFormattedData = () => {
  const data = [...reversedData].reverse();
  const dates = data.map(item => new Date(item.created_at).toLocaleString());
  const prices = data.map(item => item.price);
  const predictions = data.map(item => item.prediction);  // 提取 prediction 数据
  return { dates, prices, predictions };
};

// 初始化图表
onMounted(() => {
  chart = echarts.init(lineChart.value);  // 初始化 ECharts 实例

  // 配置图表选项
  const option = {
    title: {
      // text: '折线图 - 金额数据',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
      },
    },
    xAxis: {
      type: 'category',
      data: [], // 空数据，后续更新
      axisLabel: {
        interval: 0, // 确保所有日期标签都显示
        rotate: 45,  // 如果日期标签很长，进行旋转处理
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value}',
      },
    },
    series: [
      {
        name: '金额',
        type: 'line',
        data: [],  // 空数据，后续更新
        smooth: false, // 不要平滑折线，保持基础折线
        lineStyle: {
          color: '#37A2DA',
        },
      },
      {
        name: '预测值',
        type: 'line',
        data: [],  // 空数据，后续更新
        smooth: false, // 不平滑折线
        lineStyle: {
          color: '#FF8C00',  // 设置为橙色
        },
      }
    ]
  };

  // 设置图表配置项
  chart.setOption(option);
});

// 更新图表数据
const updateChart = () => {
  const { dates, prices, predictions,stock } = getFormattedData();

  // 更新图表数据
  chart.setOption({
    xAxis: {
      data: dates,  // 更新 X 轴数据
    },
    series: [
      {
        data: prices,  // 更新 "金额" 的 Y 轴数据
      },
      {
        data: predictions,  // 更新 "预测值" 的 Y 轴数据
      }
    ]
  });
};
</script>

<style scoped>
/* 可以根据需要调整样式 */
</style>
